<template>
  <div id='salesBar' class='w-full h-full'></div>
</template>

<script setup>
import { Chart } from '@antv/g2'
import { ref } from 'vue'
import { getMockDataFun } from '@/api/home/index.js'

// 主题颜色
const primaryColor = document.documentElement.style.getPropertyValue('--el-color-primary')
const data = ref([])
onMounted(async () => {
  data.value = await getMockDataFun()
  setChart()
})

const setChart = () => {
  const chart = new Chart({
    title: '实际销售额排行', // 标题
    type: 'view',
    container: 'salesBar',
    autoFit: true, // 视图宽高自动撑满父容器
  })


  chart
    .interval()
    .data(data.value)
    .encode('x', 'name')
    .encode('y', 'actual') // 目标
    .style('fill', `linear-gradient(-90deg, white 0%, ${primaryColor} 100%)`)
    .axis('y', { title: '' }) // 设置y轴的名称
    .axis('x', { title: '' }) // 设置y轴的名称
    .tooltip([
      { name: '实际销售额', field: 'actual' },
    ])
    .transform({ type: 'sortX', by: 'y', reverse: true })
  chart.render()
}


</script>

<style scoped>

</style>
